<template>
	<div class="inConbox clearfix det_bg">
		<!-- 头部 -->
		<Nav :URL="urls.url" :text="urls.text"></Nav>
		<!-- 邀请列表 -->
		<div class="user_invite_content">
			<div class="in_con_teb">
				<ul class="in_con_ele bdr dip">
					<li class="in_con_text dip" v-for="(INconTEB,index) in InConTeb " :key="index" :class="{'acrtive':ind == index}" @click="tabList(index)">{{INconTEB.tebText}}</li>
				</ul>
			</div>
				<aside class="users_all_list" v-show='isShowInvite'>
					<ul class="users_all_ul">
						<li class="users_all_con dipW ju_al" v-for="item in carsList">
							<div class="user_single_img">
								<img src="../../../static/images/fee/text.jpg" alt="" />
							</div>

							<div class="users_single_infos dipW ju_al">
								<i>Dopa</i>
								<span><i>商家</i></span>
							</div>
							<div class="user_single_fee dipW ju_al">
								<i>联系电话 : 13283885206</i>
								<span>注册时间 : 2018-5-24</span>
							</div>
						</li>
					</ul>
				</aside>
			<div v-show='!isShowInvite'>

			</div>

		</div>

	</div>
</template>
<script>
	import Nav from '../mallConent/mallTopNav'
	export default {
		data() {
			return {
				urls: {
					url: '/bomNav/userContent',
					text: '我的邀请',
				},
				ind: 0,
				fanNum: 3,
				isShowInvite: true,
				carsList: [1, 2, 3, 4],
				InConTeb: [{
					tebText: '我邀请的',
					tebURl: '/bomNav',
				}, {
					tebText: '我的分销',
					tebURl: '/bomNav/teb/caseA',
				}],
			}
		},
		methods: {
			getreturnblok() {
				this.$router.replace({
					path: '/bomNav/userContent'
				})
			},
			tabList: function(index, item) {
				let _this = this;
				_this.ind = index;
				_this.isShowInvite = !_this.isShowInvite
			}
		},
		components: {
			Nav
		} //引入组件
	}
</script>
<style lang="scss" scoped>
	.det_bg {
		margin: 0rem;
		z-index: 51;
		height: 100%;
		background: #f2f2f2;
		position: fixed;
	}
	
	.user_invite_content {
		background: transparent;
		width: 100%;
		position: relative;
		margin-top: .8rem;
	}
	
	.in_con_teb {
		.in_con_ele {
			border: .01rem #DEDEDE solid;
			height: 1rem;
			.in_con_text {
				width: 50%;
				height: 100%;
				align-items: center;
				justify-content: center;
				color: #666666;
				font-size: .3rem;
				font-weight: 500;
				-webkit-transition: all .5s;
				-o-transition: all .5s;
				-moz-transition: all .5s;
				transition: all .5s;
				border-right: .01rem solid #DEDEDE;
			}
		}
		
		.acrtive {
			background-image: url(../../../static/images/fee/juxing.png);
			background-position-x: 50%;
			background-position-y: 100%;
			background-repeat: no-repeat;
			background-size: 120%;
			color: #fff !important;
		}
	}
	.users_all_list {
			width: 100%;
			margin-top: .1rem;
			
			.users_all_ul {
				text-decoration: none;
				width: 100%;
				.users_all_con {
					height: 1.5rem;
					background: #FFFFFF;
					margin-bottom: .1rem;
					width: 100%;
					padding: 0 .4rem;
					border-bottom: .01rem solid #eee;
					.user_single_img {
						width: 20%;
						height: 1rem;
						img {
							width: 1.2rem;
							height: 100%;
						}
					}
					.users_single_infos {
						width: 41%;
						padding-left: .13rem;
						height: 1rem;
						i {
							width: 100%;
							text-align: left;
							font-size: .26rem;
						}
						span {
							margin-top: .3rem;
							width: 100%;
							height: .5rem;
							text-align: left;
							font-size: .26rem;
							color: #999;
							font-weight: 500;
							i {
								display: inline-block;
								width: 55%;
								height: .45rem;
								line-height: .45rem;
								font-size: .26rem;
								font-family: "微软雅黑";
								background: red;
								vertical-align: middle;
								text-align: center;
								border-radius: .05rem;
								color: #FFFFFF;
							}
						}
					}
					.user_single_fee {
						height: 1rem;
						width: 39%;
						i {
							width: 100%;
							text-align: left;
							font-size: .23rem;
							color: #999;
						}
						span {
							margin-top: .4rem;
							width: 100%;
							text-align: left;
							font-size: .23rem;
							color: #999;
						}
					}
				}
			}
		}
</style>